<template>
  <div class="app-container">
    <div class="filter-container filter-container-left">
      <el-form class="form_search flex_box_between" :inline="true" label-width='90px'>
        <el-form-item label="用户名：">
          <el-input v-model="queryParam.name" placeholder="请输入用户名" clearable/>
        </el-form-item>
        <el-form-item label="账号：">
          <el-input v-model="queryParam.contacts_mobile" placeholder="请输入账号" clearable/>
        </el-form-item>
        <el-form-item label="职位类型：">
          <el-cascader
            v-model="queryParam.attr_value_id_str"
            :options="postTypeList"
            :props='optionProps'
            :show-all-levels="false"
            @change='filterPostChange'
            placeholder="请选择职位类型"
            class="filter-item form-search-input" 
            ></el-cascader>
        </el-form-item>
        <el-form-item label="付费时间：">
          <el-date-picker
            v-model="queryParam.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item form-search-input1"
            @change='timeChange'
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="flex_box_center search_btns">
        <el-button class="filter-item search" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        <el-button class="filter-item" type="warning" icon="el-icon-plus" @click="addRule">置顶排行规则</el-button>
      </div>
    </div>
    <el-row class="count_box" :gutter="35">
      <el-col :span="12">
        <div class="count_item flex_box_center">
          <p class="icon icon1"></p>
          <div class="count_info">
            <p>{{company_count}}</p>
            <span>付费企业数</span>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="count_item flex_box_center">
          <p class="icon icon2"></p>
          <div class="count_info">
            <p>{{money_count}}</p>
            <span>总付费金额</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!-- <el-table-column prop="id" label="序号" width='80' align='center'/> -->
      <el-table-column prop="company_info.name" label="用户名" align='center'/>
      <el-table-column prop="user_info.mobile" label="账号" align='center'/>
      <el-table-column label="职位类型" prop='post_name' align='center'/>
      <el-table-column prop="open_day" label="置顶天数" align='center'/>
      <el-table-column label="剩余有效期"  align='center'>
        <template slot-scope="item">
          <p>{{getTime(item.row.top_info)}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="pay_money" label="付费金额" align='center'/>
      <el-table-column prop="update_time" label="付费时间" align='center'/>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/promotion/admin/top',
      queryParam: {
        attr_value_id_str:'',
        name: '',
        contacts_mobile:'',
        start_time:'',
        end_time:'',
        page:1,
        page_size:10
      },
      time:'',
      defaultQueryParam:['page','page_size','status'],
      optionProps: {
        value: 'value_id',
        label: 'value_name',
        children: 'child'
      },
      money_count:0,// 总付费金额
      company_count:0,// 付费企业数
    }
  },
  mounted() {
    this.GetAttrData('POST_TYPE')
  },
  methods: {
    // 搜索职位类型改变
    filterPostChange(e) {
      this.queryParam.attr_value_id_str = e[1]
    },
    // 添加规则
    addRule() {
      this.$router.push({path:'/activity/addrule'})
    },
    getTime(item) {
      if (!item || !item.timer) return 0
      let time = item.timer
      let day = time.day
      let hour = time.hour || 0
      let minute = time.minute || 0
      let second = time.second || 0
      if (day>=1) {
        return day+'天'+hour+'时'+minute+'分'
      } else {
        return hour+'时'+minute+'分'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .count_box{
    margin-bottom: 20px;
    font-size: 14px;
    color:#222;
    .count_item{
      height: 158px;
      padding:35px 0;
      box-shadow: 0px 0px 6px rgba(22, 78, 138, 0.19);
      box-sizing: border-box;
      cursor: pointer;
      &:hover{
        background: linear-gradient(318deg, #2193FE 0%, #65B5FF 100%);
        p{
          color:#fff;
        }
        span{
          color:#DCDCDC;
        }
        .icon{
          background-color:#fff;
        }
      }
      .icon{
        width: 88px;
        height: 88px;
        background-color: #E8F3FF;
        background-size:inherit;
        background-repeat:no-repeat;
        background-position: center center;
        border-radius: 50%;
        margin-right: 60px;
        &.icon1{
          background-image: url('~@/assets/images/icon15.png');
        }
        &.icon2{
          background-image: url('~@/assets/images/icon16.png');
        }
      }
      p{
        font-size: 46px;
        color:#424554;
        line-height: 46px;
        margin-bottom:4px;
      }
      span{
        font-size: 18px;
        color:#AAAAAA;
        line-height: 31px;
      }
    }
  }
</style>